<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>子组件访问父组件的属性</title>
</head>

<body>
    <div>
        父子组件通讯：子组件通过props访问父组件的数据
    </div>
    <div id="app">
       <aaa></aaa>
    </div>
    <template id="a">
        <div>
            <h2>我是aaa组件->{{msg}}</h2>
            <bbb v-bind:m="msg"></bbb>
        </div>
    </template>
    <script src="node_modules/vue/dist/vue.js"></script>  
    <script>
        var vm=new Vue({
			el:'#app',
			components:{
				'aaa':{
					template:'#a',
                    data:function() {
                       return {
                           msg: "我是组件aaa的数据"
                       }
                    },
					components:{
						'bbb':{
							template:'<h3>我是bbb组件->{{m}}</h3>',
                            props:['m']
						}
					}
				}
			}
		});
    </script>
</body>

</html>